<template>
	<view class="statistic">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<view class="statistic__search">
			<u-search placeholder="请输入商户编号或机具编号" v-model="merchantNo" shape="square" border-color="#9D60FF"
				bg-color="#fff" :show-action="false"></u-search>
			<view class="flex mt-20">
				<view class="flex-1">
					累计激活<text class="price-text">{{merchantList.merchantActivityNum}}</text>(户)
				</view>
				<view class="flex-1">
					累计注册<text class="price-text">{{merchantList.merchantRegistrationsNum}}</text>(户)
				</view>
			</view>
		</view>
		<view class="" v-if="showTab=='1'">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<view class="statistic__date">
			<text class="statistic__date-text" @click="showDate = true">{{date}}</text>

			<u-icon name="arrow-down-fill" color="#2979ff" size="30"></u-icon>
		</view>
		<view class="flex  p-20">
			<view class="">
				激活：<text class="price-text">0台</text>
			</view>
			<view class="ml-20">
				注册：<text class="price-text">0台</text>
			</view>
		</view>
		<view v-for="(item,index) in merchantList" :key="index">
			{{item.agentName}}
		</view>
		<u-picker v-model="showDate" mode="time" :params="params"></u-picker>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				merchantNo: "",
				date: "2024年",
				showDate: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				list: [{
					name: '按日维度'
				}, {
					name: '按月维度'
				}],
				current: 0,
				showTab: "0",
				agentData: {
					"activityStatus": "",
					"agentNoOrName": "",
					"countDimension": "month",
					"countType": "AGENT",
					"pageNo": 1,
					"pageSize": 10,
					"searchDate": "2024-04"
				},
				myData: {
					"activityStatus": "",
					"agentNoOrName": "",
					"pageNo": 1,
					"countType": "ORG",
					"countDimension": "month",
					"pageSize": 10,
					"searchDate": "2024-04"
				},
				merchantList: {},

			}
		},
		onLoad(options) {
			options.showTab && (this.showTab = options.showTab);
			this.agentActivityCount();
		},


		methods: {
			change(index) {
				this.current = index;
			},
			agentActivityCount() {
				let _data = {};
				let _that = this;
				console.log("show=" + _that.showTab)
				if (_that.showTab == "1") {
					_data = _that.agentData;
				} else {
					_data = _that.myData;
				}
				_that.$zx.terminal_api.agentActivityCount(_data).then((data) => {
					console.log("data=" + JSON.stringify(data))
					_that.merchantList = data.agentActivityVoList;
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.statistic {
		width: 100vw;
		height: 100vh;
		position: relative;


		&__search {
			background-color: white;
			padding: 20rpx;
		}

		&__date {
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
		}

		&__date-text {
			font-weight: bold;
			font-size: 20px;
		}

		&__icon {
			display: inline-block;
		}
	}
</style>